<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>display属性</title>

        <style>
            .box1 {
                width: 100px;
                height: 100px;
                background-color: orange;
            }
            .box2 {
                width: 100px;
                height: 100px;
                background-color: blue;
            }

            span {
                width: 100px;
                height: 100px;
                /* 行内元素设置宽高是没有作用的 */
                background-color: green;
                padding: 8px 10px;
                margin-top: 30px;
            }

            /* img和表单元素是特殊的行内块，它们既能够设置宽度高度，也能够并排显示 */
            img {
                width: 400px;
            }
            input {
                width: 100px;
                height: 100px;
            }

        </style>
    </head>
    <body>
        <div class="box1"></div>
        <div class="box2"></div>

        <span>我是span1</span>
        <span>我是span2</span>

        <div>
            <img src="003.jpg" alt=""><img src="003.jpg" alt="">
        </div>
         
        <div>
            <input type="text">
            <input type="text">
        </div>
    </body>
</html>